<template>
	<div>
		<swiper :options="swiperOption">
			<swiper-slide class="icons-wrapper">
				<div class="icon-wrapper" v-for="item of iconsList.slice(0,8)" :key="item.id">
					<img :src="item.imgUrl">
					<p class="ellipsis">{{item.desc}}</p>
				</div>
			</swiper-slide>
			<swiper-slide class="icons-wrapper">
				<div class="icon-wrapper" v-for="item of iconsList.slice(8)" :key="item.id" v-if="isShow">
					<img :src="item.imgUrl">
					<p class="ellipsis">{{item.desc}}</p>
				</div>
			</swiper-slide>
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	export default{
		name:'homeIcons',
		props:{
			iconsList:Array,
		},
		data(){
			return{
				swiperOption:{},
			}
		},
		computed:{
			isShow(){
				if(this.iconsList.length>8){
					return true;
				}else{
					return false;
				}
			},
		},
		mounted(){
			console.log(this.iconsList)
		}
	}
</script>

<style scoped>
.icons-wrapper{
	/*background-color: red;*/
	box-sizing: border-box;
	width: 100%;
	padding: .2rem;
	height: 0;
	overflow: hidden;
	padding-bottom: 50%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.icon-wrapper{
	box-sizing: border-box;
	width: 25%;
	height: 0;
	overflow: hidden;
	padding-bottom: 25%;
	position: relative;
}

.icon-wrapper>img{
	width: 70%;
	position: absolute;
	top: 0;
	left: 15%;
}

.icon-wrapper>p{
	width: 100%;
	height: .3rem;
	line-height: .3rem;
	position: absolute;
	bottom: .1rem;
	text-align: center;
}


	
</style>